import { Avatar } from "antd";
import { publish } from "pubsub-js";
import { imgUrlDev } from "../../../assets/js/tools";
import { joinGroup, showAvatorUpload } from "../../../event-type";


import {
    group_info_simple,
    group_info_group_avator_wrapper,
    group_info_group_avator,
    avator_upload_mask,
    group_info_group_name,
    group_info_group_id,
    join_btn,
} from './index.module.css'

function GroupInfoLeft(props) {

    const {group_id,group_name,group_avator,identity} = props;
    
    
    function publishJoinGroup() {
        // 弹出加入群组请求框
        publish(joinGroup, group_id);
    }


    return (
        <div className={group_info_simple}>
            <div className={group_info_group_avator_wrapper} onClick={() => publish(showAvatorUpload, {type: 'group'})}>
                <Avatar className={group_info_group_avator} src={imgUrlDev(group_avator)} size={100} />
                <div className={avator_upload_mask}>更新头像</div>
            </div>
            <span className={group_info_group_name}>{group_name}</span>
            <span className={group_info_group_id}>{group_id}</span>
            <div className={join_btn}>
                {
                    identity === -1 ? 
                        '' :
                        identity === 0 ? 
                            <button onClick={publishJoinGroup} style={{height: '40px'}}>申请加群</button> 
                            : ''
                }
            </div>
        </div>
    )
}

export default GroupInfoLeft;